<template>
    <div v-loading="loading"
         element-loading-text="Loading"
         element-loading-spinner="el-icon-loading">
        <apply-header :flag="'1'"></apply-header>
        <div class="main" :style="{'height':((getHeight-80)+'px')}">
            <Side :step="'1'"></Side>
            <section style="overflow: hidden">
                <div style="color:#999;font-size:20px;font-weight:700;margin-bottom:5px;">Step 1</div>
                <div style="color:#333;font-size:24px;font-weight:700;margin-bottom:10px;">Choose the Kind of Position That is Relevant to You</div>
                <div style="width: 100%;font-size: 13px">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
                <div style="width:100%;display: block">
                        <service-checkBox v-for="(item,index) in serviceList" :key="index" :info="item" @handleSelect="handleSelect"></service-checkBox>
                </div>
                <div style="margin-top: 20px">
                    <el-button @click="nextStep" :class="{'yellowBtn':true,'grayBtn':disableNext}" :disabled="disableNext">{{nexBtnText}}</el-button>
                </div>
            </section>
        </div>
    </div>

</template>

<script>
    import ApplyHeader from "@/components/ApplyHeader";
    import Side from '@/components/Aside.vue'
    import ServiceCheckBox from "../../components/ServiceCheckBox";
    export default {
        name: "RelativePosition",
        components:{
            ApplyHeader,
            Side,
            ServiceCheckBox
        },
        computed:{
          getHeight(){
              return document.documentElement.clientHeight
          }
        },
        data(){
            return{
                loading:false,
                disableNext:true,
                selectItem:{},
                preBtnText:'< PRE',
                nexBtnText:'NEXT >',
                serviceList:[],
            }
        },
        created() {
            this.getServiceList()
        },
        methods:{
            getServiceList(){
                var email = localStorage.getItem('email')
                this.loading=true
                this.$axios.get(this.$URL.serviceUrl,{params:{email:email}}).then(res=>{
                    this.loading=false
                    if(res&&res.code==0){
                        var data = res.data
                        this.serviceList = data
                        this.serviceList.forEach((item)=>{
                            var storeService = this.$store.state.serviceInfo
                            if(storeService.serviceId==item.serviceId) {
                                this.selectItem=storeService
                                this.$set(item,'checked',true)
                                this.disableNext=false
                            } else this.$set(item,'checked',false)
                        })
                    }else{
                        this.$message.error({message:res.msg})
                    }
                }).catch(err=>{
                    this.loading=false
                    this.$message.error({message:err})
                })
            },
            nextStep(){
                if(this.selectItem.serviceId==undefined){
                    this.$message.error({message:'you must select the service!'})
                    return
                }
                //跳转时把当前选中serviceId保存下来
                if(this.selectItem&&this.selectItem.serviceId)this.$store.commit('saveService',this.selectItem)
                if(this.selectItem.status==2||this.selectItem.status==3){
                    this.$router.push({path:this.selectItem.servicePath})
                    return
                }
                this.$router.push({path:'/position'})
            },
            handleSelect(i){
                this.serviceList.forEach((item)=>{
                    if(item.serviceId==i){
                        this.disableNext=false
                        item.checked=true
                        this.selectItem=item
                    } else item.checked=false

                })
            }
        },
        watch:{
            '$route'(to,from){
                if(to.path==='/service'){
                    console.log(from)
                   this.getServiceList()
                }
            }
        }
    }
</script>

<style scoped>

</style>